<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        .login {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            width: 300px;
            margin: auto;
            margin-top: 50px;
        }

        h3 {
            text-align: center;
            color: #333;
        }

        .formGroup {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .error {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }

        .success {
            color: green;
            font-size: 12px;
            margin-top: 5px;
        }

        .buttonGroup {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .buttonGroup .submit,
        .buttonGroup .reset {
            width: 70px;
            height: 35px;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
        }

        .buttonGroup .submit {
            background-color: #4CAF50;
        }

        .buttonGroup .reset {
            background-color: #f44336;
        }

        .passwordStrength {
            font-size: 12px;
            margin-top: 5px;
        }

        .weak {
            color: red;
        }

        .medium {
            color: orange;
        }

        .strong {
            color: green;
        }
    </style>
</head>

<body>
    <div class="login">
        <h3>登录界面</h3>
        <form>
            <div class="formGroup">
                <label for="nickname">昵称</label>
                <input type="text" id="nickname" name="nickname" placeholder="请输入昵称" autocomplete="off">
                <div id="nicknameError" class="error"></div>
                <div id="nicknameSuccess" class="success"></div>
            </div>
            <div class="formGroup">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
                <div id="passwordError" class="error"></div>
                <div id="passwordStrength" class="passwordStrength"></div>
                <div id="passwordSuccess" class="success"></div>
            </div>
            <div class="buttonGroup">
                <button class="submit">登录</button>
                <button class="reset">重置</button>
            </div>
        </form>
    </div>
</body>
<script>
    const nicknameInput = document.querySelector('#nickname');
    const passwordInput = document.querySelector('#password');
    const nicknameError = document.querySelector('#nicknameError');
    const nicknameSuccess = document.querySelector('#nicknameSuccess');
    const passwordError = document.querySelector('#passwordError');
    const passwordStrength = document.querySelector('#passwordStrength');
    const passwordSuccess = document.querySelector('#passwordSuccess');
    const submitBtn = document.querySelector('.buttonGroup .submit');
    const resetBtn = document.querySelector('.buttonGroup .reset');

    nicknameInput.addEventListener('input', validNickname);

    passwordInput.addEventListener('input', validPassword);

    submitBtn.addEventListener('click', function (e) {
        e.preventDefault();

        let isNicknameValid = validNickname();
        let isPasswordValid = validPassword();

        if (isNicknameValid && isPasswordValid) {
            alert('登录成功！');
        }
    });

    resetBtn.addEventListener('click', function (e) {
        e.preventDefault();
        nicknameInput.value = '';
        passwordInput.value = '';
        nicknameError.innerHTML = '';
        nicknameSuccess.innerHTML = '';
        passwordError.innerHTML = '';
        passwordStrength.innerHTML = '';
        passwordSuccess.innerHTML = '';
    });

    function validNickname() {
        nicknameError.innerHTML = '';
        nicknameSuccess.innerHTML = '';
        let nickname = nicknameInput.value.trim();

        if (!nickname) {
            nicknameError.innerHTML = '昵称不能为空';
            return false;
        }

        let nameRegex = /[^\u4e00-\u9fa5a-zA-Z0-9_]/;
        if (nameRegex.test(nickname)) {
            nicknameError.innerHTML = '昵称包含非法字符，只允许中文、字母、数字和下划线';
            return false;
        }

        nicknameSuccess.innerHTML = '昵称通过';
        return true;
    }

    function validPassword() {
        let password = passwordInput.value.trim();

        if (!password) {
            passwordError.innerHTML = '密码不能为空';
            return false;
        }

        let weakRegex = /^[a-zA-Z0-9]{6,}$/; // 至少6位字母或数字
        let mediumRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/; // 至少8位，包含大小写字母和数字
        let strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{10,}$/; // 至少10位，包含大小写字母、数字和特殊字符

        if (strongRegex.test(password)) {
            passwordError.innerHTML = '';
            passwordStrength.innerHTML = '密码强度：强';
            passwordStrength.className = 'passwordStrength strong';
        } else if (mediumRegex.test(password)) {
            passwordError.innerHTML = '';
            passwordStrength.innerHTML = '密码强度：中';
            passwordStrength.className = 'passwordStrength medium';
        } else if (weakRegex.test(password)) {
            passwordError.innerHTML = '';
            passwordStrength.innerHTML = '密码强度：弱';
            passwordStrength.className = 'passwordStrength weak';
        } else {
            passwordStrength.innerHTML = '';
            passwordSuccess.innerHTML = '';
            passwordError.innerHTML = '密码至少需要6位字母或数字';
            return false;
        }

        passwordSuccess.innerHTML = '密码通过';
        return true;
    }
</script>

</html>